<script setup lang="ts">
import { ElButton, ElMessage } from 'element-plus';
import ShipData from './ShipData.vue';
import WxMessage from './WxMessage.vue';
import ModelManage from './ModelManage.vue';
import RegionManage from './RegionManage.vue';
import Weather from './Weather.vue';
import { syncHifleetRegion } from 'common/src/apis';

enum DataTab {
  shipDb = 'shipDb',
  wxMessage = 'wxMessage',
  weather = 'weather',
  exercise = 'exercise',
  model = 'model',
}

const TabsNeedImport = [DataTab.shipDb, DataTab.wxMessage, DataTab.exercise];

const activeTab = ref<DataTab>(DataTab.shipDb);
const shipDbImportVisible = ref(false);
const wxMsgImportVisible = ref(false);
/** 暂时没用上，直接接口同步 */
const exerciseImportVisible = ref(false);
const shipDataRef = ref<InstanceType<typeof ShipData>>();
const importLoading = ref(false);
const weatherImportVisible = ref(false);

const tabOptions = [
  { value: DataTab.shipDb, label: '综合导航' },
  { value: DataTab.wxMessage, label: '危险报文' },
  // { value: DataTab.weather, label: '气象数据' },
  { value: DataTab.exercise, label: '碍航区' },
  { value: DataTab.model, label: '模型版本' },
];

const handleExerciseImport = async () => {
  importLoading.value = true;
  try {
    await syncHifleetRegion();
    ElMessage({
      type: 'success',
      message: '导入演习区数据成功',
    });
  } catch {
    ElMessage({
      type: 'warning',
      message: '导入演习区数据失败，请重试',
    });
  } finally {
    importLoading.value = false;
  }
};

const handleImport = () => {
  switch (activeTab.value) {
    case DataTab.shipDb:
      shipDbImportVisible.value = true;
      break;
    case DataTab.wxMessage:
      wxMsgImportVisible.value = true;
      break;
    case DataTab.exercise:
      handleExerciseImport();
      break;
    default:
      break;
  }
};

const handleTrainModel = () => {
  const ids = shipDataRef.value?.getSelectedRecords() || [];
  if (ids.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择需要训练的数据',
    });
    return;
  }
};

const switchTab = (tab: DataTab) => {
  activeTab.value = tab;
};
</script>

<template>
  <div class="data-container config-page">
    <div class="page-title">
      <span>系统设置</span>
      <span> / </span>
      <span class="page-title-active">数据管理</span>
    </div>
    <div class="page-query">
      <ElForm :inline="true" style="min-height: 50px;">
        <ElFormItem>
          <ElButton v-show="TabsNeedImport.includes(activeTab)" :loading="importLoading" type="primary" @click="() => handleImport()">导入</ElButton>
          <ElButton v-show="activeTab === DataTab.shipDb" type="primary" @click="() => handleTrainModel()">模型训练</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
    <div class="page-table-container">
      <div class="data-type-tabs">
        <div
          v-for="tab in tabOptions"
          :key="tab.value"
          :class="['data-tab', {'data-tab-active': activeTab === tab.value}]"
          @click="() => switchTab(tab.value)"
        >{{ tab.label }}</div>
      </div>
      <div class="data-type-content">
        <ShipData ref="shipDataRef" :active="activeTab === DataTab.shipDb" v-model:visible="shipDbImportVisible" />
        <WxMessage :active="activeTab === DataTab.wxMessage" v-model:visible="wxMsgImportVisible" />
        <RegionManage :active="activeTab === DataTab.exercise" v-model:visible="exerciseImportVisible" />
        <ModelManage :active="activeTab === DataTab.model" />
        <Weather :active="activeTab === DataTab.weather" v-model:visible="weatherImportVisible" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.page-table-container {
  display: flex;
  padding: 0;
  .data-type-content {
    width: calc(100% - 150px);
    padding: 20px;
  }
}
.data-type-tabs {
  flex-shrink: 0;
  height: 100%;
  width: 150px;
  border-right: 1px solid rgba(31,147,255,0.3);
}
.data-tab {
  color: #fff;
  padding: 8px 10px;
  font-size: 15px;
  cursor: pointer;
  &:hover {
    background-color: rgba(255,255,255,0.05);
  }
}
.data-tab-active {
  color: #409EFF;
  border-right: 4px solid #339DFF;
  background-color: rgba(255,255,255,0.05);
}
</style>

<style lang="less">
.data-type-content .table-container {
  .el-table {
    --el-table-border-color: rgba(31,147,255,0.3);
  }
  .el-table__body {
    border-spacing: 0px;
  }
  .el-table tbody .el-table__cell {
    background: transparent;
  }
  .el-table th.el-table__cell.is-leaf {
    border-right: 1px solid var(--el-table-border-color);
    border-bottom: 1px solid var(--el-table-border-color);
  }
  .el-table tbody .el-table__cell {
    border-top: none;
    border-bottom: 1px solid var(--el-table-border-color);
  }
}
.data-type-content .data-query-form.el-form--inline .el-form-item {
  margin-bottom: 8px;
  margin-right: 20px;
  .el-input {
    --el-input-bg-color: rgba(0, 0, 0, 0.1);
    --el-input-text-color: #eee;
    --el-input-placeholder-color: #aaa;
    --el-disabled-bg-color: rgba(0, 0, 0, 0.24);
  }
  .el-input__wrapper {
    box-shadow: none;
    border: 1px solid rgba(31,147,255,0.3);
    outline: none;
    // font-size: 16px;
  }
}
.ship-db-upload-dialog.el-dialog.custom-dialog {
  .el-dialog__body {
    padding: 0;
  }
  .ship-db-upload {
    .el-upload-dragger {
      background-color: transparent;
      --el-border-color: rgba(255, 255, 255, 0.5);
      --el-text-color-regular: rgba(255, 255, 255, 0.8);
    }
    .el-upload-list__item {
      --el-text-color-regular: rgba(255, 255, 255, 0.8);
      --el-fill-color-light: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
